<template>
  <div class="anTitle">

    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Blog_Analysis' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Blog_Analysis</el-breadcrumb-item>
        <el-breadcrumb-item>anTitle</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="Gcontainer">
      <div id="three" :style="three_style">
        <dv-percent-pond :config="progress_config" style="width:100%;height:100%; background-color: #282c34;" v-if="show_progress"/>
      </div>
      <div id="one"></div>
      <div id="two"></div>

      <div style="margin-top: 20px;">
      <h1 style="text-align: center;">掘金博客标题词汇分析</h1>
      
        <h2>结论与建议</h2>
        <p>
          在掘金博客的大量文章中，标题作为文章的核心和亮点，对于吸引读者点击和阅读起着至关重要的作用。为了更好地了解标题词汇的使用情况，我们对博客文章标题的词汇出现次数进行了统计分析。

从数据中可以看出，出现次数最多的词汇是“如何”，达到了776次。这个词汇在标题中常常用于提出一个问题或者一个问题解决的方法，具有较强的引导性和针对性，能够引起读者的兴趣和思考。

其他出现次数较多的词汇包括“实现”、“使用”、“前端”、“开发”、“Vue”、“技术”、“js”、“代码”、“项目”、“应用”等。这些词汇主要涉及技术实现、应用开发、框架使用等方面的内容，反映了掘金博客作为技术交流平台的特点和关注点。

此外，一些词汇的出现次数相对较少，如“指南”、“CSS”、“框架”、“云”、“入门”等。这可能是因为这些词汇在标题中相对较为常见，或者与掘金博客的用户群体和内容定位不太相关。

通过分析掘金博客标题词汇的分布情况，我们可以更好地了解用户在技术交流和分享中的需求和习惯。这有助于我们优化标题的撰写方式，提高文章的质量和可读性，吸引更多的读者参与交流和学习。同时，也有助于我们发现和挖掘潜在的技术趋势和热门领域，为未来的内容规划和方向提供参考。       </p>


        <div style="height: 100px;width: 200px;"></div>
    </div>
    </div>

  </div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      // 进度条
      show_progress: true,
      // 进度条配置
      progress_config: {
        value: 0,
        borderWidth: 5,
        borderRadius: 10,
        borderGap: 5,
        colors: ['#01c4f9', '#c135ff'],
      },
      // echarts数据
      three_style: "border: 1px solid yellow",
      category_barchartDome: null,
      category_barmyChart: null,
      category_baroption: null,

      category_piechartDome: null,
      category_piemyChart: null,
      category_pieoption: null,

      topic_barxAxis: {
        type: 'category',
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },
      topic_barxAxis_data: [],
      topic_bardata: [],
      topic_piedata: [],
    }
  },
  mounted() {
    this.getCategory()

    // 让进度条动起来
    setInterval(()=>{
      if (this.progress_config.value < 99) {
        //响应式修改数据
        this.$set(this.progress_config,'value',this.progress_config.value+1)
        //重新生成一个新的对象，进行赋值
        this.progress_config={...this.progress_config}
      } 
    },50)
  },
  methods: {
    getCategory() {
      // http://127.0.0.1:9292/title
      this.$http({
        url: '/title',
        method: 'post'
      }).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取文章话题数据失败')
        } else {
          // 关闭进度条
          this.show_progress = false

          this.three_style = `background-image: url("${res.data.data.img_url}");`

          // 对数据取前70个
          let times = 0
          // 处理数据

          var topic_keys = Object.keys(res.data.data.title)
          topic_keys.forEach(item => {

            if (times < 70) { 
              // console.log(item + " : " + res.data.data[item])
              // 柱状图键，即标题
              this.topic_barxAxis_data.push(decodeURI(item))
              // 柱状图数据，即内容
              this.topic_bardata.push(res.data.data.title[item])
              // 饼图数据直接给 键和值
              let temp_pie_item = { "value": res.data.data.title[item], "name": decodeURI(item) }
              this.topic_piedata.push(temp_pie_item)
             }
            
            times++
          })

          console.log(this.topic_barxAxis_data)

          // 改变柱状图的x轴标题
          this.topic_barxAxis.data = this.topic_barxAxis_data

          // 处理完数据再绘图
          this.draw_week_bar()

          this.draw_week_pie()

        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 星期柱状图 one
    draw_week_bar() {
      this.category_barchartDome = document.getElementById('two');
      this.category_barmyChart = echarts.init(this.category_barchartDome);

      this.category_baroption = {
        title: {
          show: true,
          text: "文章标签前70分布情况：",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.topic_barxAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.topic_bardata,
            type: 'bar',
            showBackground: true,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            label: {
                show: true, //开启显示
                position: 'inside', //在上方显示
                textStyle: { //数值样式
                color: 'oldlace',//字体颜色
                fontSize: 10//字体大小
                }
            }
          }
          
        ]
      };

      this.category_baroption && this.category_barmyChart.setOption(this.category_baroption);
    },
    // 星期饼图 two
    draw_week_pie() {
      this.category_piechartDome = document.getElementById('one');
      this.category_piemyChart = echarts.init(this.category_piechartDome);
      this.category_pieoption;

      this.category_pieoption = {
        title: {
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            saveAsImage: { show: true, }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.topic_piedata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      this.category_pieoption && this.category_piemyChart.setOption(this.category_pieoption);
    }

  }
}
</script>

<style scoped>
.anTitle {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 5px;
}
/* 去除滚动栏，保留滚动效果 */
.anTitle::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.Gcontainer {
  margin-top: 5px;
  width: 100%;
  height: 98%;
  /* background-color: azure; */

  box-sizing: border-box;
  padding: 5px;
  /* overflow: hidden; */
}
/* 去除滚动栏，保留滚动效果 */
.Gcontainer::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#three {
  width: 100%;
  height: 92%;
  /* flex: 1 1 48%; 设置子元素占满一行，每行两个子元素    */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("http://localhost:8888/static/picture/屏幕截图 2023-10-16 142945.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 20px;
}

#one {
  width: 100%;
  height: 92%;
  /* flex: 1 1 48%; 设置子元素占满一行，每行两个子元素    */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#two {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 92%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素     */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

</style>